<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <div class="box">
      <div class="inner"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "yangyang很帅！！",
    };
  },
};
/* 
在脚手架中配置预处理 都是针对我当前的vue-cli环境下的版本号：
less
npm i -D less-loader less

sass
npm i -D sas-loader@10 node-sass@5

下载安装完这些包
使用less在 <style lang='less'></style>
使用sass时 <style lang='sass'></style>


*/
</script>

<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  .inner {
    width: 50px;
    height: 50px;
    background-color: pink;
  }
}
</style>
